// 轮播图子组件页，可以当做组件的名称，所以不需要再命名。
<template>
    <div class="tip">
    <!-- 1.0 轮播图：mint-ui中的 swipe组件实现 -->
        <mt-swipe :auto="4000">
            <mt-swipe-item v-for="(x,index) in imgs" :key="index">
                <img v-bind:src="x.img"></img>
                <!--<img src="../../../statics/imgs/2.jpg">-->
            </mt-swipe-item>
        </mt-swipe>
    </div>
</template>

<script>
    export default {
        props: ["imgs"]
    }
</script>

<style scoped>
    /*mint-ui轮播图的样式设置*/
    .mint-swipe {
      height: 300px;
      z-index: 1;
    }
    .mint-swipe-item {
      background-color: red;
      width: 100%;
      height: 300px;
    }
    .mint-swipe-item img {
      width: 100%;
      height: 300px;
      display: block; 
    }
</style>
